<template>
  <div class="markbox"
       v-show="loading"
       style="background-color: rgba(0, 0, 0, 0.5);">
    <div class="sun-loading"></div>
  </div>
</template>
 
<script>
export default {
  name: 'Loading',
  data () {
    return {
      loading: false
    }
  },
  created () {
    var that = this;
    this.load.$on('loading', function (data) {
      that.loading = !!data;
    })
  }
}
</script>

<style lang="less">
/*loading开始*/
.sun-loading {
  width: 45px;
  height: 45px;
  display: block;
  animation: sunLoading 1s steps(12, end) infinite;
  background: transparent
    url("");
  background-size: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
/*loading结束*/
</style>